<template>
  <el-dialog
    v-model="isShowDialog"
    :before-close="handleClose"
    title="操作记录"
    draggable
    width="60%"
    append-to-body
  >
    <el-form :inline="true" :model="queryParams" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="用户">
            <el-input
              v-model="queryParams.operName"
              placeholder="用户"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="添加时间">
            <el-date-picker
              style="width: 100%"
              v-model="timeData"
              start-placeholder="开始"
              end-placeholder="结束"
              range-separator="-"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
              unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="操作行为">
            <el-input
              v-model="queryParams.title"
              placeholder="操作行为"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList"
              >查询</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <vxe-table
      ref="tableRef"
      border
      align="center"
      :data="tableList"
      height="300"
      :checkbox-config="{ trigger: 'row' }"
      :row-config="{ isCurrent: true, isHover: true }"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="operName" title="用户"></vxe-column>
      <vxe-column field="operTime" title="操作时间"></vxe-column>
      <vxe-column field="title" title="操作行为"></vxe-column>
    </vxe-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue";
import { getUserOperaList } from "@/api/system/user";
import ImagePreview from "@/components/ImagePreview/index.vue";

let queryParams = ref({ pageNum: 1, pageSize: 10 });
const timeData = ref([]);
const total = ref(0);

const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false,
  },
  currentUserId: {
    type: Number,
    default: 0,
  },
});

const emits = defineEmits(["cancel"]);

function handleClose() {
  emits("cancel");
}

let tableList = ref([]);

function getList() {
  // if(!queryParams.value.skuCode && !queryParams.value.skuName){
  //   proxy.$modal.msgWarning("请先输入查询条件!")
  //   return
  // }
  queryParams.value.startTime = timeData.value[0];
  queryParams.value.endTime = timeData.value[1];
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value,
  };
  getUserOperaList(params).then((res) => {
    if (res.code === 200) {
      console.log(res.data);
      tableList.value = res.data;
      total.value = res.total;
    }
  });
}

const resetQuery = () => {
  queryParams.value = {
    operName: "",
    title: "",
    pageNum: 1,
    pageSize: 10,
  };
  timeData.value = [];
  tableList.value = [];
};

if (props.currentUserId) {
  queryParams.value.userId = props.currentUserId;
  getList();
}
</script>

<style scoped lang="scss"></style>
